<template>
  <div
    :class="className"
    :style="{height: height, width: width}"
  />
</template>

<script lang="ts">
import * as echarts from 'echarts'
import { EChartsOption } from 'echarts'
import { Component, Prop } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/Charts/mixins/resize'
import { getScoreTrendData } from '@/api-scp/dashboard'
import { ScoreTrendItem } from '@/api-scp/types'

@Component({
  name: 'ScoreTrendChart',
  components: {}
})
export default class extends mixins(ResizeMixin) {
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '200px' }) private height!: string

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private async initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement)

    const data = await getScoreTrendData()
    this.setOptions(data)
  }

  private setOptions(data: ScoreTrendItem[]) {
    if (!this.chart) {
      return
    }

    // ...

    const option: EChartsOption =
      {
        legend: {
          // orient: 'vertical',
          right: 0,
          bottom: 0
        },
        dataset: {
          dimensions: [
            { name: 'termName' },
            { name: 'overall' },
            { name: 'mbDim' },
            { name: 'mrDim' }
          ],
          source: data
        },
        xAxis: {
          type: 'category'
          // axisLine: {
          //   show: true
          // }
        },
        yAxis: [{
          type: 'value',
          scale: true,
          name: '得分率（%）'
        }, {
          type: 'value',
          name: '综合评分'
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            type: 'bar',
            name: '综合评分',
            // label: {
            //   show: true
            // },
            barWidth: '98%',
            encode: {
              x: 0,
              y: 'overall'
            },
            yAxisIndex: 1,
            itemStyle: {
              opacity: 0.5
            }
          },
          {
            type: 'line',
            name: '管理基础维度（调整后）',
            // label: {
            //   show: true
            // },
            encode: {
              x: 0,
              y: 'mbDim'
            },
            yAxisIndex: 0
          },
          {
            type: 'line',
            name: '管理结果维度（调整后）',
            // label: {
            //   show: true
            // },
            encode: {
              x: 0,
              y: 'mrDim'
            },
            yAxisIndex: 0
          }
        ]
      }

    console.log(JSON.stringify(option, null, 2))

    this.chart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>

</style>
